<template>
  <div>
    <!-- 上方搜索栏 -->
    <div class="topBock">
      <el-row :gutter="16">
        <el-col :span="6">
          <div class="boxDiv">
            <div class="itemDiv">
              <div class="d1">总设备数</div>
              <div class="d2">1284</div>
            </div>
            <div class="itemDiv" style="text-align: right">
              <img src="../../../assets/img.png" alt="" />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="boxDiv">
            <div class="itemDiv">
              <div class="d1">在线设备数</div>
              <div class="d2">1156</div>
            </div>
            <div class="itemDiv" style="text-align: right">
              <img src="../../../assets/img.png" alt="" />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="boxDiv">
            <div class="itemDiv">
              <div class="d1">离线设备数</div>
              <div class="d2">1284</div>
            </div>
            <div class="itemDiv" style="text-align: right">
              <img src="../../../assets/img.png" alt="" />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="boxDiv">
            <div class="itemDiv">
              <div class="d1">告警设备数</div>
              <div class="d2">36</div>
            </div>
            <div class="itemDiv" style="text-align: right">
              <img src="../../../assets/img.png" alt="" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottomDiv">
      <el-row :gutter="16">
        <el-col :span="12">
          <div
            ref="pieDom"
            class="boxDiv"
            style="width: 100%; height: 400px"
          ></div>
        </el-col>
        <el-col :span="12">
          <div
            ref="chartDom"
            class="boxDiv"
            style="width: 100%; height: 400px"
          ></div>
        </el-col>
      </el-row>
      <el-row style="margin: 16px 0">
        <el-col :span="24">
          <div
            ref="chartDom2"
            class="boxDiv"
            style="width: 100%; height: 400px"
          ></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chartInstance: null,
      chartInstance2: null,
      pieInstance: null,
    };
  },
  mounted() {
    this.initChart();
    this.initChart2();
    this.initPic();
  },
  methods: {
    initPic() {
      const pieDom = this.$refs.pieDom;
      this.pieInstance = echarts.init(pieDom);
      const option = {
        title: {
          text: "设备区域分布",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "设备区域分布",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "朝阳区" },
              { value: 735, name: "东城区" },
              { value: 580, name: "西城区" },
              { value: 484, name: "海淀区" },
              { value: 300, name: "其他" },
            ],
          },
        ],
      };
      this.pieInstance.setOption(option);
    },
    initChart() {
      const chartDom = this.$refs.chartDom;
      this.chartInstance = echarts.init(chartDom);

      // 配置选项（示例：柱状图）
      const option = {
        title: {
          text: "设备行业分布",
        },
        xAxis: {
          data: ["商业广告", "交通设施", "文化设施", "教育机构", "医疗机构"],
        },
        yAxis: {},
        series: [{ type: "bar", data: [10, 20, 30] }],
      };

      this.chartInstance.setOption(option);
    },
    initChart2() {
      const chartDom2 = this.$refs.chartDom2;
      this.chartInstance2 = echarts.init(chartDom2);

      // 配置选项（示例：柱状图）
      const option = {
        title: {
          text: "责任单位分布",
        },
        xAxis: {
          data: [
            "北京科技有限公司",
            "吉林公司",
            "北京科技有限公司",
            "吉林公司",
            "吉林公司",
            "吉林公司",
            "吉林公司",
            "吉林公司",
            "北京科技有限公司",
            "北京科技有限公司",
          ],
        },
        yAxis: {},
        series: [{ type: "bar", data: [10, 20, 30, 120, 200, 9, 20, 32, 44] }],
      };

      this.chartInstance2.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  height: 100%;

  width: 100%;
}
.topBock {
  //   padding: 16px;
  margin: 16px;
}
.bottomDiv {
  margin: 0 16px;
}
.boxDiv {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 6px;
  padding: 16px;
}
.itemDiv {
  flex: 1;
}
.itemDiv img {
  width: 40px;
}
.itemDiv .d1 {
  color: #979ca5;
  font-size: 13px;
  margin-bottom: 8px;
}
.itemDiv .d2 {
  color: #070707;
  font-size: 24px;
  font-weight: 600;
}
</style>
